<!--
 * @Author: Wangtao
 * @Date: 2022-06-04 02:15:28
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-06-06 15:25:40
-->
<template>
  <!-- 消息数 -->
  <div
    :class="['message-count-box', isCenter ? 'box-center' : '']"
    id="message-count-box"
    v-show="isShowMessageCountBox"
    @click="toAppointMsg"
  >
    <i class="V7_iconfont V7_iconV7tubiao_gengduojiantou"></i
    >{{ unreadmessages }}条新消息
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'

import VueScrollTo from '@/utils/scrollTo.js'
import { WebchatModule } from '@/store/modules/webchat'
@Component({
  name: 'MessageCount'
})
export default class MessageCount extends Vue {
  @Prop({ default: false }) public isCenter!: boolean;
  get unreadmessages () {
    return WebchatModule.unreadmessages
  }

  get unreadmessagesid () {
    return WebchatModule.unreadmessagesid
  }

  get isShowMessageCountBox () {
    return this.unreadmessages > 0
  }

  private toAppointMsg () {
    console.log('当前id', this.unreadmessagesid)
    const messageBox: any = document.getElementById('webchatContentBox')
    const offset = (messageBox.getBoundingClientRect().height - 100) * -1
    const options: any = {
      container: '#webchatContentBox',
      easing: 'ease',
      lazy: false,
      offset,
      force: true,
      cancelable: true,
      x: false,
      y: true
    }
    const cancelScroll: any = VueScrollTo.scrollTo('#' + this.unreadmessagesid, 100, options)
    // cancelScroll();
  }
}
</script>
<style lang="stylus">
.message-count-box
  position absolute
  top -35px
  right 0
  height 30px
  width 120px
  text-align center
  display flex
  align-items center
  color #008BEE
  background-color #FFFFFF
  box-shadow 0 0 1px 1px #ecf0f3
  font-size 12px
  border-top 1px solid #ecf0f3
  border-left 1px solid #ecf0f3
  border-right 1px solid #ecf0f3
  border-radius 3px
  padding 0 10px 0
  box-sizing border-box
  cursor pointer
  left 0
  justify-content center
  .V7_iconfont
    font-size 10px
.box-center
  left: 285px
</style>
